import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  Modal,Icon,Tabs,message,Table,Dropdown,Menu,Button,Input,Form ,Row,Col,Select,Switch,Popconfirm,Radio,DatePicker ,Upload}from 'antd';
const Search = Input.Search;
const Option = Select.Option;
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';
import {
  REMARK_TYPE
} from "../constants/index"
import api from '../api';
import moment from 'moment';
import {bind_change, bind_toggle} from '../common/State';
const {RangePicker} = DatePicker;
const {TextArea} = Input;
const dateFormat = 'YYYY-MM-DD';


const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 17 },
};

 class RemarkModal extends React.Component {
    constructor(props, context){
        super(props, context);
        this.state={
          detail:{
            files:[]
          },
          isDetail:false,
          isSelectExecution:false,
        };
    }
    onOk(){

      let {visibility,onSubmitRemark} = this.props;
      this.props.form.validateFields((err, values) => {
        if (err) return;
        if (values.type == "EXECUTION") {
          values.fee_date = values.fee_date.format('YYYY-MM-DD');
        }
        console.log('test=================',values);
        onSubmitRemark(values);
      });

      
    }
    onCancel(){
      let {onCancelRemarkModal} = this.props;
      this.setState({
        detail:{},
      })
      onCancelRemarkModal();
    }

    // onDateChange(date,dateString){
    //   let {remarkContent} = this.state;
    //   remarkContent.beginDate = dateString[0];
    //   remarkContent.endDate = dateString[1];
    //   this.setState({
    //     remarkContent,
    //   })
    // }

    // onGradeChange(value){
    //   let {remarkContent} = this.state;
    //   remarkContent.grade = value;
    //   this.setState({remarkContent});
    // }

    // onSettleChange(e){
    //   let {remarkContent} = this.state;
    //   remarkContent.settle = e.target.value;
    //   this.setState({remarkContent});
    // }

    onChange(value){
      if (value == "EXECUTION") {
        this.setState({
          isSelectExecution:true,
        })
      }else{
        this.setState({
          isSelectExecution:false,
        })
      }
    }

    uploadProps = (params) =>{
      this.uploadFile(params);
    }

  async uploadFile(params){
    let {
        file,
        filename,
      } = params;
      let {detail} = this.state;

      let result = await api.upload('/file/upload?file_type=7',file);
      if(result){
        let uid = this.uuid();
        detail.files.push({
          name:file.name,
          url:result.data.url,
          type:result.data.type,
          uid:uid,
          status:'done'
        })
      }
      this.props.form.setFieldsValue({
        files:detail.files
      })
      this.setState({detail})


  }

  //   uploadProps = () => {
  //   let _this = this;
  //   let {detail,isDetail} = this.state;
  //   return {
  //     customRequest:async ({ file, fileList }) => {
  //       let {defaultFileList=[]} = this.state;
  //       let result = await api.upload('/file/upload?file_type=7',file);
  //       if(result){
  //         let uid = this.uuid();
  //         detail.files.push({
  //           name:file.name,
  //           url:result.data.url,
  //           type:result.data.type,
  //           uid:uid,
  //           status:'done'
  //         })
  //       }
  //       this.props.form.setFieldsValue({
  //         files:detail.files
  //       })
  //       this.setState({detail})
  //     },
  //     onRemove:(file) => {
  //       return !isDetail
  //     }
  //   }
  // }

  uuid(){
    return Math.random().toString(36).slice(2);
  }

  normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  }

  getSelectionType(){
    let {userType} = this.props;
    if (userType == "PLAN_ADMIN") {
      return(
          <Select style={{width:'100%'}} 
            value="OTHER"
            disabled={true}>
            <Option key="0" value="OTHER">其他说明</Option>
          </Select>
        )
    }else{
      return(
          <Select style={{width:'100%'}} 
            onChange={this.onChange.bind(this)}>
            {Object.keys(REMARK_TYPE).map((key,index) => {
              return (<Option key={index} value={key}>{REMARK_TYPE[key]}</Option>)
            })}
          </Select>
        )
    }
  }
    
    render() {
      let {visibility,userType} = this.props;
      let {detail,isDetail,isSelectExecution} = this.state;
      const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;

        return (
                <Modal
                  title={'添加备注'}
                  visible={visibility}
                  onOk={this.onOk.bind(this)}
                  onCancel={this.onCancel.bind(this)}
                  width={400}
                  wrapClassName={"modal-from"}
                  maskClosable={false}

                >
                  <Form layout="horizontal" >
                    
                    <Form.Item
                      label="备注类型"
                      {...formItemLayout}
                    >

                      {getFieldDecorator('type', {
                        rules: [{ required: true, message: '请选择备注类型' }],
                        initialValue: userType == "PLAN_ADMIN" ? "OTHER":detail.type 
                      })(
                        this.getSelectionType()
                        
                      )}
                    </Form.Item>
                    {isSelectExecution ? 

                      <Form.Item
                        label="费用日期"
                        {...formItemLayout}
                      >
                        {getFieldDecorator('fee_date', {
                          rules: [{ required: false, message: '请选择备注日期' }],
                          initialValue:detail.fee_date?moment(detail.fee_date):null
                        })(
                          <DatePicker style={{width:"100%"}}  />
                        )}
                      </Form.Item>
                      :
                      null
                    }
                    {isSelectExecution ? 
                      <Form.Item
                        label="费用金额"
                        {...formItemLayout}
                      >
                        {getFieldDecorator('fee_money', {
                          rules: [{ required: false, message: '请输入涉及金额' }],
                          initialValue:detail.fee_money
                        })(
                          <Input  placeholder="请输入涉及金额" addonAfter="元" />
                        )}
                      </Form.Item>
                      : 
                      null
                    }
                    
                    <Form.Item
                      label="备注描述"
                      {...formItemLayout}

                    >
                      {getFieldDecorator('detail', {
                        rules: [{ required: true, message: '请选择备注详情' }],
                        initialValue:detail.detail
                      })(
                        <TextArea placeholder="请输入备注详情"  autosize={{ minRows: 2, maxRows: 6 }} />
                      )}
                    </Form.Item>
                    <Form.Item
                      label="备注文件"
                      {...formItemLayout}
                    >
                      {getFieldDecorator('files', {
                        rules: [{ required: true, message: '请上传备注附件' }],
                        valuePropName: 'fileList',
                        getValueFromEvent: this.normFile,
                        initialValue:detail.files
                      })(
                        <Upload 
                            customRequest={this.uploadProps}
                            onRemove={(file) => {
                              return !isDetail
                            }}>
                          
                            <Button disabled={isDetail}>
                              <Icon type="upload" /> 点击上传
                            </Button>
                          
                          
                        </Upload>
                      )}
                    </Form.Item>
                  </Form>
                </Modal>
               
        );
    }

    
}
RemarkModal.contextTypes= { router: React.PropTypes.object.isRequired};
export default Form.create()(RemarkModal);
